<template>
  <div class="userAttendance">
    <div class="header">
       <div style="margin-right:20px">
        <el-date-picker
          v-model="searchDate"
          type="month"
          placeholder="选择月">
        </el-date-picker>       
      </div>
       <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="id" prop="id"  align="center"> </el-table-column>
      <el-table-column label="姓名" prop="name"  align="center"> </el-table-column>
      <el-table-column label="考勤年份" prop="year"  align="center"> </el-table-column>
      <el-table-column label="考勤月份" prop="month" align="center"> </el-table-column>
      <el-table-column  prop="normal" align="center">
        <template slot="header" >
            <div class="normal">正常/天</div>
      </template>
      </el-table-column>
      <el-table-column  prop="late" align="center">
          <template slot="header" >
              <div class="late">迟到/天</div>
        </template>
      </el-table-column> 
      <el-table-column  prop="early" align="center">
          <template slot="header" >
              <div class="early">早退/天</div>
        </template>
      </el-table-column>
      <el-table-column  prop="field" align="center">
          <template slot="header" >
              <div class="field">外勤/天</div>
        </template>
      </el-table-column>
      <el-table-column  prop="lack" align="center">
          <template slot="header" >
              <div class="lack">缺卡/天</div>
        </template>
      </el-table-column> 
      <el-table-column  prop="absenteeism" align="center">
          <template slot="header" >
              <div class="absenteeism">旷工/天</div>
        </template>
      </el-table-column>
      <el-table-column  prop="leave" align="center">
          <template slot="header" >
              <div class="leave">请假/天</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { info,userId,searchDate } from "@/api/account/index";
export default {
  name: "userAttendance",
  data() {
    return {
        naem:null,
        tableData:[],
        attendanceData:[],
        searchDate:null
    };
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    this.init();
  },

  methods: {
    async init() {
        // 获取用户名称
      await userId(this.$route.params.id).then(res=>{
        if(res.status === 0){
            this.name = res.data[0].name
        }
      })
        // 用户数据
      await info(this.$route.params.id).then((res) => {
        if(res.status === 0){
            this.attendanceData = res.data
        }
      });
      this.getUserName()
    },
    // 给每行赋予用户姓名
    getUserName(){
      this.tableData = []
      for(let i = 0;i < this.attendanceData.length;i++){
        let obj = {} 
        obj = { ...this.attendanceData[i] }   
        obj.name = this.name
        this.tableData.push(obj)
      }
    },
    handleQuery(){
        const date = new Date(this.searchDate)
        const obj = {
          year : date.getFullYear(),
          month : date.getMonth() + 1
        }
        console.log(obj,'搜索');
        searchDate(obj).then(res=>{
          if(res.status === 0){
            this.attendanceData = res.data;
            this.getUserName()
          }
        })
    },
    resetQuery(){
        this.searchMonth = ''
    }
  },
};
</script>
<style lang='less' scoped>
.header {
  text-align: left;
  margin-bottom: 10px;
  display: flex;
}
.normal,.late,.early,.field,.lack,.absenteeism,.leave{
  padding:5px 10px;
  // text-align: center;
}
</style>